<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="sass/3.css">
    <title>Document</title>
</head>
<>
    <div id="abc" class="abc">
        <div class="card" v-for="item in data">
            <ul >
                <li>
                    <img :src="item.img"  >
                    <p><span>姓名：</span>{{item.name}}</p>
                    <p><span>年龄：</span>{{item.age}}</p>
                    <p><span>性别：</span>{{item.sex}}</p>
                    <p><span>总分</span>{{item.chinese+item.math+item.english}}</p>
                </li>
            </ul>
            <div v-if="item.chinese>60&&item.math>60&&item.english>60">
                <div class="button"><span>...</span></div>
                    <div class="hide">
                        <div class="hide-content">
                            <span>语文：{{item.chinese}}</span>
                            <span>数学：{{item.math}}</span>
                            <span>英语：{{item.english}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const Abc={
        data(){
                return{
                    data:[
                        {img:"image/1.jpg",name:'张三',age:20,sex:"男",chinese:70,math:80,english:80},
                        {img:"image/2.jpg",name:'李四',age:20,sex:"男",chinese:90,math:80,english:80},
                        {img:"image/3.jpg",name:'王五',age:20,sex:"男",chinese:70,math:70,english:80},
                    ]
                }
        }
    }
    Vue.createApp(Abc).mount('#abc')
</script>
</html>